<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" scrollable max-width="300px">
      <v-card>
        <span class="title text-center subtitle-2 py-3"
          >选择规格
          <v-icon @click="hide()">mdi-close</v-icon>
        </span>
        <v-divider></v-divider>
        <v-card
          class="d-flex flex-column align-center py-3 px-4"
          outlined
          flat
          tile
          v-for="item in data"
          :key="item.productAttributeId"
        >
          <span class="caption text--secondary" v-text="item.name"></span>
          <div class="text-center">
            <v-btn-toggle
              v-model="selection[item.productAttributeId]"
              tile
              color="#2AB795"
              group
            >
              <v-btn
                v-for="(value, i) in item.value.split(',')"
                :key="i"
                class="ma-1"
                outlined
                rounded
                v-text="value"
                small
                :value="i"
              ></v-btn>
            </v-btn-toggle>
          </div>
        </v-card>
        <div class="d-flex justify-space-between align-center py-4 px-12">
          <v-btn
            class="ml-4"
            icon
            @click="goodsCount > 1 ? goodsCount-- : null"
          >
            <v-icon color="#2AB795">mdi-minus-circle</v-icon>
          </v-btn>
          <span v-text="goodsCount"></span>
          <v-btn class="mr-4" icon @click="goodsCount++">
            <v-icon color="#2AB795">mdi-plus-circle</v-icon>
          </v-btn>
        </div>
        <div class="text-center pb-4">
          <v-btn
            @click="handleCartItemAdd"
            class="mx-2"
            small
            rounded
            color="#2AB795"
            dark
            >加入购物车</v-btn
          >
          <v-btn class="mx-2" small rounded color="#FD994B" dark
            >立即购买</v-btn
          >
        </div>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      goodsCount: 1,
      selection: {},
      dialog: false,
      specifications: []
    };
  },
  methods: {
    show() {
      this.dialog = true;
    },
    hide() {
      this.dialog = false;
    },
    handleCartItemAdd() {
      this.$bus.emit('onCartItemAdd', {
        quantity: this.goodsCount,
        productAttr: JSON.stringify(this.productAttr)
      });
      this.hide();
    },
    getProductAttr() {
      return this.productAttr;
    }
  },
  watch: {
    data(newValue) {
      newValue.forEach(each => {
        this.$set(this.selection, String(each.productAttributeId), 0);
      });
    },
    dialog(newValue) {
      if (newValue === false) {
        this.$bus.emit('onSpecificationChange', this.productAttr);
      }
    }
  },
  computed: {
    productAttr() {
      return this.data.map(each => {
        const index = this.selection[each.productAttributeId];
        const key = each.name;
        const value = each.value.split(',')[index];
        return { key, value };
      });
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  position: relative;
  button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
